<script setup>
import {ref, defineEmits} from "vue"
import {searchMachine} from "@/apis/search"
import defaultImg from "@/assets/material.png";

const keyWord = ref("")
const machineList = ref([])
const emit = defineEmits(['confirm'])
const current_page = ref(1)
const last_page = ref(1)
const total = ref(0)

function loadData() {
  searchMachine({
    condition: [
      ['name|property_id|model', 'like', "%" + keyWord.value + "%"],
      ['status', '=', 1]
    ]
  })
      .then(res => {
        const {code, data} = res.data;
        if (code === 1) {
          machineList.value = data.data;
          current_page.value = data.current_page;
          last_page.value = data.last_page;
          total.value = data.total
        }
      })
}

function onScroll(scrollBottom) {
  if (scrollBottom < 50) {
    current_page.value++
    loadData();
  }
}

function onConfirm(item) {
  item.total = 1;
  emit('confirm', item);
  machineList.value = [];
}


</script>

<template>
  <div class="p-a">
    <t-search
        v-model="keyWord"
        placeholder="搜索名称、编号、型号"
        :onChange="loadData"
    />
  </div>
  <div class="user-list">
    <t-list @scroll="onScroll" v-if="total>0">
      <t-cell v-for="item in machineList" :title="item.name" :key="item.id"
              :image="item.cover != '' ? item.cover : defaultImg" @click="onConfirm(item)">
        <template #description>
          <t-tag style="margin-right: 8px;" theme="success">机器编号: {{ item.property_id }}</t-tag>
          <t-tag style="margin-right: 8px;" theme="primary">机器型号: {{ item.model }}</t-tag>
        </template>
      </t-cell>
    </t-list>
    <t-cell v-else>暂无数据</t-cell>
  </div>
</template>

<style scoped lang="less">
.p-a {
  padding: 12px;
  box-sizing: border-box;
}

.user-list {
  width: 100%;
  min-height: 300px;
}
</style>